<template>
  <div>
    <el-container>
      <el-header style="background-color: #545c64;height: 7vh">
        <div class="header">
          <h3 style="display: flex; align-items: center;width: 170px; justify-content: space-between">
            <img class="icon" src="@/assets/1-进销存.svg"/>
            办公用品系统
          </h3>
          <el-button slot="reference" @click="handelQuit">退出登录</el-button>
        </div>
      </el-header>
      <el-container style="background-color: #545c64">
        <el-aside width="15vw">
          <el-menu
            style="border: none"
            default-active="/"
            :default-openeds="openeds"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true">
            <el-menu-item index="/layout">
              <i>
                <img class="icon" src="@/assets/数据统计.svg"/>
              </i>
              <span slot="title">
                <span>系统首页</span>
              </span>
            </el-menu-item>
            <el-menu-item v-if="userType === 9" index="/warehouse">
              <i>
                <img class="icon" src="@/assets/仓库库存.svg"/>
              </i>
              <span slot="title">
                <span>仓库管理</span>
              </span>
            </el-menu-item>
            <el-menu-item v-if="userType === 9" index="/notice">
              <i>
                <img class="icon" src="@/assets/系统-系统公告.svg"/>
              </i>
              <span slot="title">
                <span>公告管理</span>
              </span>
            </el-menu-item>

            <el-submenu v-if="userType === 9 || userType === 2" index="1">
              <template slot="title">
                <i>
                  <img class="icon" src="@/assets/采购管理-采购设置.svg"/>
                </i>
                <span>入库中心</span>
              </template>
              <el-menu-item index="/buy">
                <i>
                  <img class="icon" src="@/assets/进货量.svg"/>
                </i>
                <span>{{ userType === 9 ? '商品采购' : '我的入库申请' }}</span>
              </el-menu-item>
              <el-menu-item index="/history_goods">
                <i>
                  <img class="icon" src="@/assets/备案.svg"/>
                </i>
                <span>商品登记</span>
              </el-menu-item>
            </el-submenu>

            <el-menu-item index="/sale">
              <i>
                <img class="icon" src="@/assets/销售管理.svg"/>
              </i>
              <span slot="title">{{ userType === 1 ? '我的出库申请' : '出库管理' }}</span>
            </el-menu-item>

            <el-submenu v-if="userType === 9" index="2">
              <template slot="title">
                <i>
                  <img class="icon" src="@/assets/系统管理员管理.svg"/>
                </i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/employee">
                <i>
                  <img class="icon" src="@/assets/员工管理.svg"/>
                </i>
                <span>员工管理</span>
              </el-menu-item>
<!--              <el-menu-item index="/stock">-->
<!--                <i>-->
<!--                  <img class="icon" src="@/assets/仓库库存.svg"/>-->
<!--                </i>-->
<!--                <span>库存管理</span>-->
<!--              </el-menu-item>-->
            </el-submenu>

          </el-menu>

        </el-aside>

        <el-container>
          <el-main style="background-color: #e0e0e2;height: 93vh;padding-top: 1rem">
            <router-view/>
            <el-footer>
              <Footer/>
            </el-footer>
          </el-main>

        </el-container>

      </el-container>
    </el-container>

  </div>

</template>

<script>
import { removeEmpInfo } from '@/utils/localstore'
import Footer from '@/components/FooterPage.vue'

export default {
  name: 'SystemsPage',
  components: { Footer },
  data () {
    return {
      openeds: ['1', '2']
    }
  },
  computed: {
    userType () {
      return Number(this.$store.getters.userType)
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handelQuit () {
      removeEmpInfo()
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
</style>
